feat!: update to new course outline structure and design by rpenido · Pull Request #115 · openedx/frontend-plugin-aspects

rpenido · 2026-01-16T23:22:10Z

Description

This PR updates the plugin structure to the new sidebar design.

For now, it only works for the Course Outline page.

Additional Information

Related to:
- Course Outline: Course/Section/Subsection In Context Sidebar frontend-app-authoring#2639
- Unit Page: In Context Sidebar frontend-app-authoring#2640
Depends on:
- feat: add UnitSidebarPagesContext frontend-app-authoring#2874

Testing Instructions

Setup

Follow the tutor-contrib-aspects plugin installation instructions from here, but using this branch (because the main tutor plugin will install a fixed version from the frontend plugin.
Follow the frontend-plugin-aspects develop instructions here, using the branch this branch and the env.config.jsx with the wrap plugin like below:

import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from "@openedx/frontend-plugin-framework";
import {
  UnitActionsButton,
  CourseOutlineSidebarWrapper,
  UnitOutlineSidebarWrapper,
  SubSectionAnalyticsButton,
} from "@openedx/frontend-plugin-aspects";

const config = {
  ...process.env,
  pluginSlots: {
    "org.openedx.frontend.authoring.course_outline_sidebar.v1": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: "default_contents",
          wrapper: CourseOutlineSidebarWrapper,
        },
      ],
    },
    "org.openedx.frontend.authoring.course_unit_sidebar.v2": {
      keepDefault: true,
      plugins: [
        {
          op: PLUGIN_OPERATIONS.Wrap,
          widgetId: "default_contents",
          wrapper: UnitOutlineSidebarWrapper,
        },
      ],
    },
    "org.openedx.frontend.authoring.course_outline_unit_card_extra_actions.v1":
      {
        keepDefault: true,
        plugins: [
          {
            op: PLUGIN_OPERATIONS.Insert,
            widget: {
              id: "uni-card-my-extra-action",
              type: DIRECT_PLUGIN,
              priority: 51,
              RenderWidget: UnitActionsButton,
            },
          },
        ],
      },
    "org.openedx.frontend.authoring.course_outline_subsection_card_extra_actions.v1":
      {
        keepDefault: true,
        plugins: [
          {
            op: PLUGIN_OPERATIONS.Insert,
            widget: {
              id: "sub-card-my-extra-action",
              type: DIRECT_PLUGIN,
              priority: 51,
              RenderWidget: SubSectionAnalyticsButton,
            },
          },
        ],
      },
  },
};

export default config;

You may need to run npm install on the frontend folder to update the frontend-plugin-framework version. If you are not seeing the plugin icon, you can try npm install ./frontend-plugin-aspects; npm run build; from the frontend-app-authoring folder.

NOTE: The Aspects use some LMS APIs to check the course structure, so make sure you have all your course components published before testing. You need to have some units with Problems and Videos xblocks (the ones shown in aspects). You also need at least one Graded Subsection (i.e. Three dot menu from subsection card > Configure > Graded as: Homework).

Testing Course Outline

Open the Course Outline and check the aspects sidebar icon and page. It must show information about the current course (it is fine if the graphs are empty, but they must be rendered).

- Check the Aspects icon in the Graded Subsection

- Clicking in the Aspects icon should open the graphs with the graded subsection in context

- Selecting the Section and clicking on the aspects button from the sidebar should show the same info. - Check the Aspects icon in the Units with `Problem` or `Video` XBlocks.

- Selecting the Unit and clicking on the aspects button from the sidebar should show the same info.

Testing Unit Outline

Open the Unit outline for a unit with Problem or Video XBlocks.
Open the Aspects sidebar and check if it is working

- Selecting a `Video` or `Problem` XBlock and clicking on the aspects icon on the sidebar should show the in context info for this component.

Private ref: FAL-4305

openedx-webhooks · 2026-01-16T23:22:16Z

Thanks for the pull request, @rpenido!

This repository is currently maintained by @openedx/committers-frontend.

Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review.

🔘 Get product approval

If you haven't already, check this list to see if your contribution needs to go through the product review process.

If it does, you'll need to submit a product proposal for your contribution, and have it reviewed by the Product Working Group.
- This process (including the steps you'll need to take) is documented here.
If it doesn't, simply proceed with the next step.

🔘 Provide context

To help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:

Dependencies

This PR must be merged before / after / at the same time as ...
Blockers

This PR is waiting for OEP-1234 to be accepted.
Timeline information

This PR must be merged by XX date because ...
Partner information

This is for a course on edx.org.
Supporting documentation
Relevant Open edX discussion forum threads

🔘 Get a green build

If one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green.

Details

Where can I find more information?

If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources:

When can I expect my changes to be merged?

Our goal is to get community contributions seen and reviewed as efficiently as possible.

However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:

The size and impact of the changes that it introduces
The need for product review
Maintenance status of the parent repository

💡 As a result it may take up to several weeks or months to complete a review and merge your PR.

codecov · 2026-01-21T23:04:40Z

Codecov Report

❌ Patch coverage is 89.78102% with 14 lines in your changes missing coverage. Please review.
✅ Project coverage is 73.56%. Comparing base (7c0584f) to head (a738e7e).
⚠️ Report is 5 commits behind head on main.

Files with missing lines	Patch %	Lines
src/hooks.ts	42.85%	4 Missing ⚠️
src/components/AspectsSidebar/Dashboard.tsx	0.00%	2 Missing and 1 partial ⚠️
src/index.ts	0.00%	3 Missing ⚠️
src/components/AspectsSidebar/index.tsx	90.47%	1 Missing and 1 partial ⚠️
src/plugin-slots.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #115       +/-   ##
===========================================
+ Coverage   53.25%   73.56%   +20.30%     
===========================================
  Files          15       13        -2     
  Lines         338      348       +10     
  Branches       67       76        +9     
===========================================
+ Hits          180      256       +76     
+ Misses        149       84       -65     
+ Partials        9        8        -1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

rpenido · 2026-03-13T21:43:30Z

This is what happens to me.

Thanks for the info @ChrisChV!
The issue is that the sidebar in the CourseOutline uses an LMS API to filter the blocks, while the sidebar in the UnitOutline uses information from the CMS. I'm not sure which use case was intended for the analytics here (maybe we should create a similar API in the CMS, since we are in Studio?).
This is not related to the current change, and I'm afraid we don't have the budget to dive into it. If you Publish your course, they should look the same.

I improved the coverage a bit, but we may also need more time to make it cover all features. This was tricky because we use data from the CourseAuthoring package here, but we don't have it installed, so we had to mock it.

rpenido · 2026-03-16T21:32:30Z

Hi @saraburns1 / @bmtcril !
Can I get a review on this PR?
It updates the plugin code to work with the new sidebar.

Thanks! 😄

saraburns1 · 2026-03-24T14:54:53Z

Hi @rpenido ! Couple things from my testing:

The sidebar should move with you as you scroll down the page so when you click on the analytics icon for a subsection, you don't need to scroll all the way back to the top. See screenshot for what it should look like.

When a subsection analytics is selected, the sidebar shows all available charts for that subsection. If you click into one of them, the back arrow should bring you back to the subsection charts (as shown in this video)
https://github.com/user-attachments/assets/6d032f36-67ba-424f-bbbe-110b5af72ea6
In the unit page view, if you click on an item in the sidebar it scrolls the page down past the top of the item and doesn't move the dashboard (see video for example).
https://github.com/user-attachments/assets/d546681d-df9a-49c4-b8ca-0fd79e8eb7cd

rpenido · 2026-03-31T14:23:15Z

Thanks for the review @saraburns1!

The sidebar should move with you as you scroll down the page so when you click on the analytics icon for a subsection, you don't need to scroll all the way back to the top. See screenshot for what it should look like.

This one is a bit trickier since we are using the new sidebar, which is always sticky at the top. I don't think we can make it work differently for the Aspects page.

Maybe we can try to make the whole sidebar fixed on the view height with a scrollbar, but it may have other implications. CC @sdaitzman @edschema @ChrisChV

When a subsection analytics is selected, the sidebar shows all available charts for that subsection. If you click into one of them, the back arrow should bring you back to the subsection charts (as shown in this video)

Good catch! Just to confirm, when you say "subsection" here, you mean "unit", right?
Fixed here: 051b21c

In the unit page view, if you click on an item in the sidebar it scrolls the page down past the top of the item and doesn't move the dashboard (see video for example).

I fixed that in openedx/frontend-app-authoring#2969

saraburns1 · 2026-03-31T16:53:57Z

This one is a bit trickier since we are using the new sidebar, which is always sticky at the top. I don't think we can make it work differently for the Aspects page.

Hmm. @bmtcril @crathbun428 - what are your thoughts on this? Is it better to not scroll the page at all? Or keep the scroll-to-unit and then have to scroll back to the top of the page to see the analytics?

bmtcril · 2026-03-31T17:05:13Z

I think we will have the same problem when it comes to tags, of needing some kind of sidebar that stays in place with the context of what the user clicked. Tags currently overlay the regular sidebar with a different looking and larger sidebar modal, which isn't great and I know was on the list of things to fix, but I think whatever solution we come up with should be reusable for both and any other future in-context cases.

rpenido · 2026-04-09T18:55:26Z

Hi @bmtcril and @saraburns1!
Is there something we can do to move this forward?

brian-smith-tcril · 2026-04-13T15:19:55Z

I'm trying to understand what changes were made in frontend-app-authoring that broke the existing plugin.

Looking through the plugin slots mentioned in the testing block of the PR description:

org.openedx.frontend.authoring.course_outline_sidebar.v1
- This doesn't appear to have changed since v2.0.2 of this plugin was released.
- The most recent changes were in feat: course outline sidebar frontend-app-authoring#2731
  - Nothing in the CourseAuthoringOutlineSidebarSlot component or its use in the CourseOutline component stands out as breaking
org.openedx.frontend.authoring.course_unit_sidebar.v2
- There are both v1 and v2 versions of this slot, v2.0.2 of this plugin already mentions v2 in the README
- https://github.com/openedx/frontend-plugin-aspects/blob/main/src/plugin-slots.ts still uses course_authoring_unit_sidebar_slot which is an alias for v1
- The most recent change to the CourseAuthoringUnitSidebarSlot component was in feat: New Unit info sidebar [FC-0114] frontend-app-authoring#2822
  - The previous default content (including the org.openedx.frontend.authoring.course_unit_sidebar.v1 slot) was moved to a new LegacySidebar component.
  - The CourseUnit component was updated to conditionally render CourseAuthoringUnitSidebarSlot on !isUnitLegacyLibraryType. Before that PR, it was rendered conditionally on blockId being truthy.

Looking through the diff for this PR, it's not fully clear to me what changes are being made because they are needed for the plugin to continue to work vs what changes are being made to utilize new functionality from frontend-app-authoring.

My main concern is that something may have landed in frontend-app-authoring that is a breaking change for site operators utilizing plugin slots that wasn't properly communicated/documented.

With that in mind, the questions I'd like to see answers to are:

What happens when the v2.0.2 of this plugin is used with frontend-app-authoring master?
What is the last commit of frontend-app-authoring that works as expected with v2.0.2 of this plugin.
- Based on my initial research, I would guess it would be the commit right before feat: New Unit info sidebar [FC-0114] frontend-app-authoring#2822 landed
What was missed during the review process that led to this being a surprise?

rpenido · 2026-04-13T16:23:00Z

Looking through the diff for this PR, it's not fully clear to me what changes are being made because they are needed for the plugin to continue to work vs what changes are being made to utilize new functionality from frontend-app-authoring.

The changes in this PR are to move the aspects sidebar to a new page within the current sidebar, rather than overriding it.

What happens when the v2.0.2 of this plugin is used with frontend-app-authoring master?

The plugin is rendered over the sidebar, as expected. The user may have some erratic behavior on some features (from the authoring side, not aspects) which were moved to the sidebar: i.e. Tagging, Adding Content, etc..

brian-smith-tcril · 2026-04-13T16:28:33Z

The changes in this PR are to move the aspects sidebar to a new page within the current sidebar, rather than overriding it.

If I'm understanding this correctly this means it is moving to a new page within the new (non-legacy) sidebar. That means that everyone using a version of this plugin with these changes will need to be using a version of frontend-app-authoring with the new sidebar. In that case, this isn't a fix:, it's a feat!:.

rpenido · 2026-04-16T14:54:24Z

Hi @saraburns1! Sorry for the ping, but is there anything blocking this from being merged? 😄

saraburns1 · 2026-04-16T15:17:44Z

@rpenido can you change the version number in package.json to 3.0.0? then i'll merge

rpenido · 2026-04-16T15:26:31Z

can you change the version number in package.json to 3.0.0? then i'll merge

Sure, but isn't the version applied on release?
package.json shows 0.1.0

frontend-plugin-aspects/package.json

Line 3 in 0c87bf0

"version": "0.1.0",

saraburns1 · 2026-04-16T15:34:51Z

it doesn't get updated on release, we need to do it manually - and it was never done for v2 so we should just do it now

rpenido · 2026-04-16T15:42:14Z

Thanks for the clarification @saraburns1!
Done here: b891036

saraburns1 · 2026-04-16T15:45:03Z

@rpenido one more thing, can you fix the 'branch out of date' error? it won't let me merge

rpenido · 2026-04-16T16:18:15Z

Thanks @saraburns1!!

saraburns1 · 2026-04-23T17:47:51Z

@rpenido why does the sidebar look like this in the master sandbox? should there have been a feature toggle or something?

rpenido · 2026-04-23T18:04:48Z

Hi @saraburns1!
The new Unit and Course outlines are behind the following flags: ENABLE_UNIT_PAGE_NEW_DESIGN and ENABLE_COURSE_OUTLINE_NEW_DESIGN
https://github.com/openedx/frontend-app-authoring/blob/47d213bfc2f3fa6001a44411bf64d0dcad77fe59/src/index.jsx#L187-L188

We are removing these flags and making the new design default as part of openedx/frontend-app-authoring#2879

saraburns1 · 2026-04-23T18:18:03Z

is the plan to enable this for Verawood?

rpenido · 2026-04-23T18:31:22Z

@saraburns1 Yes!

saraburns1 · 2026-04-23T18:32:30Z

Thank you!

…

On Thu, Apr 23, 2026 at 2:31 PM Rômulo Penido ***@***.***> wrote: *rpenido* left a comment (openedx/frontend-plugin-aspects#115) <#115?email_source=notifications&email_token=BIR4DO4SPTM5PF3B6MGLX4T4XJORDA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGY4DGNRYGIZ2M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJNLQOJPWG33NNVSW45C7N5YGK3S7MNWGSY3L#issuecomment-4306836823> @saraburns1 <https://github.com/saraburns1> Yes! — Reply to this email directly, view it on GitHub <#115?email_source=notifications&email_token=BIR4DO4SPTM5PF3B6MGLX4T4XJORDA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGY4DGNRYGIZ2M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJNLQOJPWG33NNVSW45C7N5YGK3S7MNWGSY3L#issuecomment-4306836823>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BIR4DO55FLYV4NRQ2LUBDGL4XJORDAVCNFSM6AAAAACR67V6ZKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DGMBWHAZTMOBSGM> . Triage notifications, keep track of coding agent tasks and review pull requests on the go with GitHub Mobile for iOS <https://github.com/notifications/mobile/ios/BIR4DOYZR4L7MTQL3IXBKTL4XJORDA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGY4DGNRYGIZ2M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJKTGN5XXIZLSL5UW64Y> and Android <https://github.com/notifications/mobile/android/BIR4DO7PPSJTYREJFMVXESD4XJORDA5CNFSNUABFM5UWIORPF5TWS5BNNB2WEL2JONZXKZKDN5WW2ZLOOQXTIMZQGY4DGNRYGIZ2M4TFMFZW63VHNVSW45DJN5XKKZLWMVXHJLTGN5XXIZLSL5QW4ZDSN5UWI>. Download it today! You are receiving this because you were mentioned.Message ID: ***@***.***>

openedx-webhooks added the open-source-contribution PR author is not from Axim or 2U label Jan 16, 2026

openedx-webhooks added this to Contributions Jan 16, 2026

github-project-automation Bot moved this to Needs Triage in Contributions Jan 16, 2026

mphilbrick211 moved this from Needs Triage to Waiting on Author in Contributions Jan 20, 2026

rpenido force-pushed the rpenido/new-course-outline-sidebar-design branch 7 times, most recently from 8e921e2 to d7de0cc Compare January 21, 2026 23:02

rpenido force-pushed the rpenido/new-course-outline-sidebar-design branch 16 times, most recently from 2f0eabb to f491f64 Compare January 22, 2026 19:47

rpenido closed this Jan 22, 2026

test: add mock and fix tests

4d92918

fix: going back from a component selected within a unit

051b21c

rpenido mentioned this pull request Mar 31, 2026

fix: xblock scroll offset openedx/frontend-app-authoring#2969

Merged

7 tasks

Merge branch 'main' into rpenido/new-course-outline-sidebar-design

ea6e87c

saraburns1 mentioned this pull request Apr 13, 2026

[frontend] Epic: Studio sidebars: slots; add new/use existing; metrics/analytics; help openedx/frontend-app-authoring#1958

Open

saraburns1 approved these changes Apr 13, 2026

View reviewed changes

chore: bump version to 3.0.0

b891036

Merge branch 'main' into rpenido/new-course-outline-sidebar-design

a738e7e

Conversation

rpenido commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Additional Information

Testing Instructions

Setup

Testing Course Outline

Testing Unit Outline

Uh oh!

openedx-webhooks commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

rpenido commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rpenido commented Mar 16, 2026

Uh oh!

saraburns1 commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rpenido commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

saraburns1 commented Mar 31, 2026

Uh oh!

bmtcril commented Mar 31, 2026

Uh oh!

rpenido commented Apr 9, 2026

Uh oh!

brian-smith-tcril commented Apr 13, 2026

Uh oh!

rpenido commented Apr 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brian-smith-tcril commented Apr 13, 2026

Uh oh!

rpenido commented Apr 16, 2026

Uh oh!

saraburns1 commented Apr 16, 2026

Uh oh!

rpenido commented Apr 16, 2026

Uh oh!

saraburns1 commented Apr 16, 2026

Uh oh!

rpenido commented Apr 16, 2026

Uh oh!

saraburns1 commented Apr 16, 2026

Uh oh!

rpenido commented Apr 16, 2026

Uh oh!

saraburns1 commented Apr 23, 2026

Uh oh!

rpenido commented Apr 23, 2026

Uh oh!

saraburns1 commented Apr 23, 2026

Uh oh!

rpenido commented Apr 23, 2026

Uh oh!

saraburns1 commented Apr 23, 2026 via email

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

rpenido commented Jan 16, 2026 •

edited

Loading

openedx-webhooks commented Jan 16, 2026 •

edited

Loading

codecov Bot commented Jan 21, 2026 •

edited

Loading

rpenido commented Mar 13, 2026 •

edited

Loading

saraburns1 commented Mar 24, 2026 •

edited

Loading

rpenido commented Mar 31, 2026 •

edited

Loading

rpenido commented Apr 13, 2026 •

edited

Loading